<template>
  <div class="text-study">
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-alert v-else-if="error" :title="error" type="error" show-icon :closable="false" />
    <div v-else>
      <MyHeaderInLesson :lesson="lesson" :moduleName="'全文学习'" />

      <div class="study-controls">
        <AudioControls
          :current-index="currentSentenceIndex"
          :total-items="lesson?.content?.length || 0"
          :is-playing="isPlaying"
          @previous="playPrevious"
          @toggle-playback="togglePlayback"
          @next="playNext"
          @speed-change="changeSpeed"
        />

        <!-- 添加控制选项 -->
        <div class="study-options">
          <div class="option-item">
            <el-switch
              title="一个句子读完读下一个句子"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              v-model="continuousReading"
              inline-prompt
              active-text="连续阅读"
              inactive-text="不连续阅读"
              size="large"
            />
          </div>
          <div class="option-item">
            <el-switch
              title="一个句子一直循环播放"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              v-model="repeatSentence"
              :disabled="continuousReading"
              inline-prompt
              active-text="单句循环"
              inactive-text="不循环句子"
              size="large"
            />
          </div>
          <div class="option-item">
            <el-switch
              title="循环播放文章，播放完成后从头开始"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              v-model="repeatArticle"
              inline-prompt
              active-text="循环播放"
              inactive-text="不循环播放"
              size="large"
            />
          </div>
          <div class="option-item skip-marked-sentences">
            <el-switch
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              v-model="onlyReadUnMarked"
              inline-prompt
              active-text="跳过已掌握"
              inactive-text="读全部"
              size="large"
            />
          </div>
          <div class="option-item sentence-repeat-count">
            <el-input-number v-model="sentenceRepeatCount" :min="1" :max="10" size="small">
              <template #prefix>
                <span>重读</span>
              </template>
              <template #suffix>
                <span>次</span>
              </template>
            </el-input-number>
          </div>
        </div>
      </div>

      <TextDisplay
        :content="lesson?.content || []"
        :current-index="currentSentenceIndex"
        :current-Wave="currentWave"
        @play-sentence="playSingleSentence"
        :marked-words="markedWords"
        @toggle-word-mark="toggleWordMark"
        :mastered-sentences="masteredSentences"
        @toggle-sentence-mastered="toggleSentenceMastered"
        :course-id="this.lesson.courseId"
        :lesson-id="lesson?.id"
      />
    </div>
  </div>
</template>

<script>
import TextDisplay from '../components/text-study/TextDisplay.vue'
import AudioControls from '../components/text-study/AudioControls.vue'
import {
  ElSkeleton,
  ElAlert,
  ElPageHeader,
  ElCheckbox,
  ElInputNumber,
  ElTable,
  ElTableColumn,
  ElButton,
  ElMessage,
  ElCard
} from 'element-plus'
import { lessonLoader } from '../mixins/lessonLoader.js'
import { textStudyMixin } from '../mixins/textStudy.js'
import MyHeaderInLesson from '../components/layout/MyHeaderInLesson.vue'

export default {
  name: 'TextStudy',
  components: {
    TextDisplay,
    AudioControls,
    ElSkeleton,
    ElAlert,
    ElPageHeader,
    ElCheckbox,
    ElInputNumber,
    ElTable,
    ElTableColumn,
    ElButton,
    ElCard,
    MyHeaderInLesson
  },
  mixins: [lessonLoader, textStudyMixin]
}
</script>

<style scoped lang="scss">
@use '../assets/styles/textStudy.scss';
</style>